import Vue from 'vue';
import Dialog from './Dialog.vue';

Dialog.newInstance = properties => {
  const _props = properties || {};

  const Instance = new Vue({
    data: Object.assign({}, _props, {
      visible: false,
      width: 416,
      title: '',
      body: '',
      iconType: '',
      iconName: '',
      okText: undefined,
      cancelText: undefined,
      showCancel: false,
      loading: false,
      buttonLoading: false,
      scrollable: false
    }),
    render (h) {
      const footerVNodes = [];
      if (this.showCancel) {
        footerVNodes.push(h('button', {
          attrs: {
            class: 'button'
          },
          on: {
            click: this.cancel
          }
        }, this.localeCancelText));
      }
      footerVNodes.push(h('button', {
        attrs: {
          class: 'button is-success'
        },
        props: {
          type: 'primary',
          size: 'large',
          loading: this.buttonLoading
        },
        on: {
          click: this.ok
        }
      }, this.localeOkText));

      const that = this
      return h(Dialog,{
        props: Object.assign({}, _props, {
          width: this.width,
          closable: this.closable,
          footerHide: this.footerHide,
          unit: this.unit,
          content: this.body,
          iconType: this.iconType,
          scrollable: this.scrollable
        }),
        domProps: {
          value: this.visible
        },
        on: {
          input: (status) => {
            this.visible = status;
          }
        },
        scopedSlots: {
          header (props) {
            return h('div',{
              attrs: {
                class: 'modal-card-title'
              },
              domProps: {
                innerHTML: that.title
              }
            })
          },
          footer (props) {
            return footerVNodes
          }
        }
      })
    },
    computed: {
      localeOkText () {
        return this.okText || '确定'
      },
      localeCancelText () {
        return this.cancelText || '取消'
      }
    },
    methods: {
      cancel () {
        this.$children[0].visible = false;
        this.buttonLoading = false;
        this.onCancel();
        this.remove();
      },
      ok () {
        if (this.loading) {
          this.buttonLoading = true;
        } else {
          this.$children[0].visible = false;
          this.remove();
        }
        this.onOk();
      },
      remove () {
        setTimeout(() => {
          this.destroy();
        }, 300);
      },
      destroy () {
        this.$destroy();
        document.body.removeChild(this.$el);
        this.onRemove();
      },
      onOk () {},
      onCancel () {},
      onRemove () {}
    }
  });

  const component = Instance.$mount();
  document.body.appendChild(component.$el);
  const dialog = Instance.$children[0];

  return {
    show (props) {
      dialog.$parent.showCancel = props.showCancel;
      dialog.$parent.iconType = props.icon;

      if ('width' in props) {
        dialog.$parent.width = props.width;
      }

      if ('title' in props) {
        dialog.$parent.title = props.title;
      }

      if ('content' in props) {
        dialog.$parent.body = props.content;
      }

      if ('okText' in props) {
        dialog.$parent.okText = props.okText;
      }

      if ('cancelText' in props) {
        dialog.$parent.cancelText = props.cancelText;
      }

      if ('onCancel' in props) {
        dialog.$parent.onCancel = props.onCancel;
      }

      if ('onOk' in props) {
        dialog.$parent.onOk = props.onOk;
      }

      if ('unit' in props) {
        dialog.$parent.unit = props.unit;
      }

      if ('scrollable' in props) {
        dialog.$parent.scrollable = props.scrollable;
      }

      if ('closable' in props) {
        dialog.$parent.closable = props.closable;
      }

      if ('footerHide' in props) {
        dialog.$parent.footerHide = props.footerHide;
      }

      dialog.visible = true;
    },
    remove () {
      dialog.visible = false;
      dialog.$parent.buttonLoading = false;
      dialog.$parent.remove();
    },
    component: dialog
  };
};

export default Dialog;